<!DOCTYPE html>
{% load i18n static simpletags %}
{% get_current_language as LANGUAGE_CODE %}{% get_current_language_bidi as LANGUAGE_BIDI %}
<html lang="{{ LANGUAGE_CODE|default:"en-us" }}" {% if LANGUAGE_BIDI %}dir="rtl"{% endif %}>
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    {% block title %}
        <title>{{ site_title }}-{% trans 'Log in' %}</title>
    {% endblock %}
    {% block icon %}
    {% endblock %}

    {% include 'admin/includes/css-part.html' %}

    {% block css %}
        <link rel="stylesheet" href="{% static 'css/humanistic_login.css' %}">
    {% endblock %}

    {% block bg %}
    {% endblock %}

    {% block head %}
    {% endblock %}
</head>
<body class="humanistic-bg">

{% block left %}
{% endblock %}

{% block main %}
    <div class="login-decorator">
        <div class="login-main">
            {% block logo %}
                <div class="logo">
                    <!-- Logo图片可以在这里添加 -->
                </div>
            {% endblock %}

            {% block header %}
                <div class="header">
                    <img src="{% static 'images/女孩2.jpg' %}" alt="Girl Image" class="header-image">
                    <div>「欢迎回来」</div>
                </div>
            {% endblock %}

            {% block errors %}
                {% if form.non_field_errors %}
                    {% for error in form.non_field_errors %}
                        <el-alert
                                title="{{ error }}"
                                type="error">
                        </el-alert>
                    {% endfor %}
                {% endif %}
                {% if form.errors and not form.non_field_errors %}
                    <p class="errornote">
                        {% if form.errors.items|length == 1 %}
                            <el-alert title="{% trans "Please correct the error below." %}" type="error"></el-alert>
                        {% else %}
                            <el-alert title="{% trans "Please correct the errors below." %}" type="error"></el-alert>
                        {% endif %}
                    </p>
                {% endif %}
            {% endblock %}
            
            {% block form %}
                <form class="simpleui-form" action="{{ app_path }}" method="post" id="login-form">
                    {% csrf_token %}
                    <div class="simpleui-input-inline">
                        <el-input prefix-icon="fas fa-user" v-model="username" name="username"
                                  placeholder="{% trans 'username' %}" autofocus></el-input>
                    </div>
                    <div class="simpleui-input-inline">
                        <el-input prefix-icon="fas fa-lock" type="password" v-model="password" name="password"
                                  @keyup.enter.native="login()"
                                  placeholder="{% trans 'password' %}" show-password></el-input>
                    </div>
                    {% url 'admin_password_reset' as password_reset_url %}
                      {% if password_reset_url %}
                     <div class="password-reset-link">
                        <a class="forgot-password" href="{{ password_reset_url }}">「寻回密码」</a>
                      </div>
                      {% endif %}
                    <div class="simpleui-input-inline login-btn">
                        <el-button :icon="loading?'el-icon-loading':''" @click="login()"
                                   type="primary">「启程」</el-button>
                    </div>

                    <input type="hidden" name="next" value="{{ next }}"/>
                </form>
            {% endblock %}
            
            <div class="login-footer">
                「每一次登录，都是心灵的片刻休憩」
            </div>
        </div>
        
        <!-- 装饰元素 -->
        <div class="humanistic-decoration">
            <div class="decoration-element girl-image">
                <img src="{% static 'images/女孩2.jpg' %}" alt="Girl Image">
            </div>
            <div class="decoration-element">☁</div>
            <div class="decoration-element">🍃</div>
            <div class="decoration-element">☁</div>
            <div class="decoration-element">🍃</div>
        </div>
    </div>
{% endblock %}

{% include 'admin/includes/js-part.html' %}

{% block login_js %}
<script type="text/javascript" src="{% static 'admin/simpleui-x/js/login.js' %}?_=3.3"></script>
<script>
// 输入框聚焦效果
document.addEventListener('DOMContentLoaded', function() {
    const inputs = document.querySelectorAll('.el-input input');
    
    inputs.forEach(input => {
        // 添加聚焦效果
        input.addEventListener('focus', function() {
            const icon = this.closest('.el-input').querySelector('.el-input__icon');
            if (icon) {
                icon.style.color = '#D1C4E9';
            }
        });
        
        // 添加失焦效果
        input.addEventListener('blur', function() {
            const icon = this.closest('.el-input').querySelector('.el-input__icon');
            if (icon) {
                icon.style.color = '#B0BEC5';
            }
        });
    });
    
    // 按钮悬停效果
    const button = document.querySelector('.login-btn .el-button');
    if (button) {
        button.addEventListener('mouseenter', function() {
            const icon = this.querySelector('.el-icon-loading');
            if (icon) {
                icon.style.color = '#D1C4E9';
            }
        });
    }
});
</script>
{% endblock %}

</body>
</html>